<template>
	<view class="content text-noraml">
		<view class="pay">
			<text class="u-font-40">￥<text class="num">{{money || ''}}</text></text>
            <view class="u-font-24">合计支付</view>
		</view>
		
		<view class="item">
			<view class="u-font-28 u-padding-bottom-25">支付方式</view>
			<view class="u-flex u-row-between">
				<view class="right u-flex u-row-between">
					<image class="pay-icon" src="../../static/icon/pay.png"></image>
					<text class="u-font-28 text-bold u-padding-left-10">微信支付</text>
				</view>
				<image class="index-icon-30" :src="payType == 1 ? '../../static/icon/choose_01.png' : '../../static/icon/choose_01.png'"></image>
			</view>
		</view>
		<view class="btn u-font-34" @click="$noMultipleClicks(pay)">确认支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                noClick:true,
				id: "",
				money: '',
				payInfo: '',
				payType: 1, //1微信支付 5.余额支付 6.微信+余额支付
			};
		},
		onLoad(option) {
            console.log(option)
            let _this = this
			this.id = option.id
			this.money = option.money
            
            // this.$wxConfig(location.href);
            this.$ajax('config', {
            	 url: location.href.split('#')[0],
            }).then(ret => {
            	uni.hideLoading()
            	if (ret.success == 1000) {
            		_this.$wx.config({
            		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            		    appId: ret.detail.jsApiList.appId, // 必填，公众号的唯一标识
            		    timestamp: ret.detail.jsApiList.timestamp, // 必填，生成签名的时间戳
            		    nonceStr: ret.detail.jsApiList.nonceStr, // 必填，生成签名的随机串
            		    signature: ret.detail.jsApiList.signature, // 必填，签名
            		    jsApiList: ret.detail.data, 
            		});
            	} else {
            		that.$toast(ret.msg);
            	}
            });
		},
		methods: {
			pay() {
                console.log('1111')
				var that = this;
				that.$ajax('wxpay', {
					user_token: that.$getSync('userToken'),
					order_id: that.id,
				}).then(ret => {
					uni.hideLoading()
					if (ret.success == 1000) {
						that.payInfo = ret.detail
                        
                        that.$wx.ready(function() {
                            that.$wx.chooseWXPay({
                                appId: that.payInfo.appId,
                                timestamp: that.payInfo.timeStamp,
                                nonceStr: that.payInfo.nonceStr,
                                package: that.payInfo.package,
                                signType: 'MD5',
                                paySign: that.payInfo.paySign,
                                success: function(res) {
                                    uni.switchTab({
                                    	url: '/pages/tabbar/mine'
                                    })
                                },
                                fail: function(err) {
                                    console.log(err)
                                    that.$toast('支付失败！');
                                }
                            });
                        })
					} else {
						that.$toast(ret.msg);
					}
				});
			},
			
		}
	};
</script>

<style lang="scss">
	.dangqian{
        font-size: 26rpx;
        font-weight: normal;
        color: #e2a53f;
        padding-left: 10rpx;
    }
    .price{
        font-size: 30rpx;
        font-weight: bold;
    }
    
	page {
		background-color: #f5f5f5;
	}

	.content {
		padding: 20rpx;
        font-size: 30rpx;
	}

	.pay {
		padding: 70rpx 0;
		text-align: center;

		text {
			font-weight: bold;
		}

		.num {
			font-size: 60rpx;
			// padding-right: 10rpx;
		}
	}

	.item {
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 30rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;

		.right {
			.pay-icon {
				width: 41rpx;
				height: 36rpx;
                margin-right: 15rpx;
			}
		}

		.index-icon-30 {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pay-02 {
		width: 710rpx;
		height: 202rpx;
		margin: 0 auto 65rpx;
	}

	.btn {
		margin-top: 60rpx;
		padding: 25rpx 270rpx;
        background-color: #40bef1;
		// background-image: linear-gradient(to right, #fd9c4a, #f67c2c, #f05c0d);
		border-radius: 50rpx;
		color: #FFFFFF;
		text-align: center;
	}
	
	
	.item-left{
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	}
	.icon{
	    width: 44rpx;
	    height: 44rpx;
	    margin-right: 15rpx;
	}
	.arrow-right{
	    width: 16rpx;
	    height: 29rpx;
	    margin-left: 15rpx;
	}
	
	.price1{
	    font-size: 28rpx;
	}
	.price-num1{
	    font-size: 44rpx;
	}
	.inp{
	    width: 50vw;
	    text-align: right;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	.inp1{
	    color: #f93835;
	}
	
	.cart{
		position: fixed;
		right: 40rpx;
		bottom: 70rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 2rpx solid #f05c0d;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #f05c0d;
	}
	.cart-img{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
	}
	
</style>
